var startDate;
var endDate;
var alarmCycle;
var lineEchart = document.getElementById('dataAvailability');
var detailLineEchart = document.getElementById('detailBar');
var queryName;
$(function() {
	setTimePicker();
	onChanged();
});

function setTimePicker() {
	var e = new Date();
	$('#startDate_id').datetimepicker({
		format : 'yyyy-mm-dd',
		minView : 2,
		autoclose : true,
		endDate : e,
		todayHighlight : true
	});
	$('#endDate_id').datetimepicker({
		format : 'yyyy-mm-dd',
		minView : 2,
		autoclose : true,
		endDate : e,
		pickerPosition : 'bottom-left',
		todayHighlight : true
	});
}

function onChanged() {
	alarmCycle = $("#alarmCycle_id").val();
	getDateByType(alarmCycle);
	endDate = initDate(new Date());
	$('#startDate_id').val(startDate);
	$('#endDate_id').val(endDate);
	onBtnClick();
}


function onBtnClick() {
	var xdata = new Array();
	var ydata = new Array();
	startDate = $("#startDate_id").val();
	endDate = $("#endDate_id").val(); 
	$.getJSON('/rest/dataSourceWarnServices/getOSBProjectByStartAndEndTime/' + startDate + '/' + endDate, function(result) {
		for (x in result) {
			xdata[x] = result[x].name;
			ydata[x] = result[x].ratio;
		}
		initEchartBar(xdata,ydata);
	});
	if(queryName){
		$.getJSON('/rest/dataSourceWarnServices/getDetailTasks/'+queryName+'/' + startDate + '/' + endDate, function(result) {
			var xdataDetail = new Array();
			var ydataDetail = new Array();
			for (x in result) {
				xdataDetail[x] = result[x].name;
				ydataDetail[x] = result[x].ratio;
			}
			initDetailEchartBar(xdataDetail,ydataDetail,queryName);
		});
	}else{
		$.getJSON('/rest/dataSourceWarnServices/getDetailTasks/'+'其他服务'+'/' + startDate + '/' + endDate, function(result) {
			var xdataDetail = new Array();
			var ydataDetail = new Array();
			for (x in result) {
				xdataDetail[x] = result[x].name;
				ydataDetail[x] = result[x].ratio;
			}
			initDetailEchartBar(xdataDetail,ydataDetail,'其他服务');
		});
	}
}

function initStartDate(n,timeUnit) {
	var date = new Date();
	if (timeUnit === 'd') {
		date.setDate(date.getDate() + n);  
    } else if (timeUnit === 'M') {  
        date.setMonth(date.getMonth() + n);  
    } else if (timeUnit === 'y') {  
        date.setFullYear(date.getFullYear() + n);  
    } 
	startDate = initDate(date);
}

function initDate(date) {  
    var strYear = date.getFullYear();  
    var strMonth = date.getMonth()+1;  
    var strDay = date.getDate();  
	var strDate = strYear + '-' + formatNumber(strMonth) + '-' + formatNumber(strDay);
	return strDate;
} 

function formatNumber(value){    
    return (value < 10 ? '0' : '') + value;    
}

function getDateByType(alarmCycle) {
	if(alarmCycle == 1) {
		initStartDate(-7,"d");
	} else if(alarmCycle == 2) {
		initStartDate(-1,"M");
	} else if(alarmCycle == 3) {
		initStartDate(-3,"M");
	} else if(alarmCycle == 4) {
		initStartDate(-1,"y");
	}
}
function initEchartBar(xdata,ydata) {
	var echart = echarts.init(lineEchart);
	var option = {
		title : {
			text : '各系统数据可用率',
			x : 'center',
			y : 'top',
			textAlign : 'left',
		},
		color : [ '#008080' ],
		tooltip : {
			trigger : 'axis',
			axisPointer : {
				type : 'shadow'
			},
			formatter : function(params) {
				var html = '';
				if (params.length > 0) {
					Xindex = params[0].dataIndex;
					for (var int = 0; int < params.length; int++) {
						html += params[int].seriesName + ':' + params[int].data + '<br>';
					}
				}
				return html;
			}
		},
		grid : {
			left : '3%',
			right : '4%',
			bottom : '3%',
			containLabel : true
		},
		dataZoom : [ {
			/* type : 'inside', */
			start : 0,
			end : 90
		} ],
		toolbox : {
			show : true,
			x:'92%',
			feature : {
				dataView : {
                	readOnly: true,
                	optionToContent:function(opt){
                		var axisData = opt.xAxis[0].data;
                	    var series = opt.series;
                	    var table = '<table border="1" style="width:100%;text-align:center"><tbody><tr>'
                	                 + '<td>'+opt.xAxis[0].name+'</td>';
                	    for(var j=0;j<series.length;j++){
                	    	table = table + '<td>' + series[j].name + '</td>'
                	    }
                	    for (var i = 0, l = axisData.length; i < l; i++) {
                	        table += '<tr>'
                	                 + '<td>' + axisData[i] + '</td>';
                	        for(var z=0;z<series.length;z++){
                	        	if(isNaN(parseInt(series[z].data[i]))){
                	        		table = table + '<td>' + '</td>';
                	        	}else{
                	        		table = table + '<td>' + series[z].data[i] + '</td>';
                	        	}
                	        }
                	    }
                	    table += '</tbody></table>';
                	    return table;
                	},
                	iconStyle:{
                		normal:{},
                		emphasis:{}
                	}
                },
				magicType : {
					show : true,
					type : [ 'line' ]
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				},
			}
		},
		xAxis : {
			type : 'category',
			data : xdata,
			name : '数据源',
			axisTick : {
				alignWithLabel : true
			},
			axisLabel : {
				interval : 0,
				rotate : 0,
				textStyle : {
					fontSize: 16
				},
				formatter : function(value) {
					if(value){
						return value.split("").join("\n");
					}else{
						return "未知服务";
					}
				}
			}
		},
		yAxis : {
			name : '可用率(%)',
			axisTick : {
				alignWithLabel : true
			}
		},
		series : [ {
			name : '可用率',
			type : 'bar',
			barWidth : '40%',
			data : ydata
		},
		],
		label : {
			normal : {
				show : true,
				position : 'top',
				formatter : '{c}'
			}
		},
		itemStyle : {
			normal : {
				shadowColor : 'rgba(0, 0, 0, 0.1)',
				shadowBlur : 10,
				color:'#8FBC8F'
			}
		},
	};
	echart.setOption(option);
	echart.on('click', function (params) {
		var xdata = new Array();
		var ydata = new Array();
		startDate = $("#startDate_id").val();
		endDate = $("#endDate_id").val(); 
		if(!params.name){
			params.name = '其他服务';
		}
		queryName = params.name; //查询前给queryName赋值
		$.getJSON('/rest/dataSourceWarnServices/getDetailTasks/'+params.name+'/' + startDate + '/' + endDate, function(result) {
			for (x in result) {
				xdata[x] = result[x].name;
				ydata[x] = result[x].ratio;
			}
			initDetailEchartBar(xdata,ydata,params.name);
		});
	});
}

function initDetailEchartBar(xdata,ydata,name){
	var detailEchart = echarts.init(detailLineEchart);
	var option = {
		title : {
			text : ' 【 '+name+' 】 '+'数据可用率',
			x : 'center',
			y : 'top',
			textAlign : 'left',
		},
		color : [ '#008080' ],
		tooltip : {
			trigger : 'axis',
			axisPointer : {
				type : 'shadow'
			},
			formatter : function(params) {
				var html = '';
				if (params.length > 0) {
					Xindex = params[0].dataIndex;
					for (var int = 0; int < params.length; int++) {
						html += params[int].seriesName + ':' + params[int].data + '<br>';
					}
				}
				return html;
			}
		},
		grid : {
			left : '3%',
			right : '4%',
			bottom : '3%',
			containLabel : true
		},
		dataZoom : [ {
			/* type : 'inside', */
			start : 0,
			end : 90
		} ],
		toolbox : {
			show : true,
			x:'92%',
			feature : {
				dataView : {
                	readOnly: true,
                	optionToContent:function(opt){
                		var axisData = opt.xAxis[0].data;
                	    var series = opt.series;
                	    var table = '<table border="1" style="width:100%;text-align:center"><tbody><tr>'
                	                 + '<td>'+opt.xAxis[0].name+'</td>';
                	    for(var j=0;j<series.length;j++){
                	    	table = table + '<td>' + series[j].name + '</td>'
                	    }
                	    for (var i = 0, l = axisData.length; i < l; i++) {
                	        table += '<tr>'
                	                 + '<td>' + axisData[i] + '</td>';
                	        for(var z=0;z<series.length;z++){
                	        	if(isNaN(parseInt(series[z].data[i]))){
                	        		table = table + '<td>' + '</td>';
                	        	}else{
                	        		table = table + '<td>' + series[z].data[i] + '</td>';
                	        	}
                	        }
                	    }
                	    table += '</tbody></table>';
                	    return table;
                	},
                	iconStyle:{
                		normal:{},
                		emphasis:{}
                	}
                },
				magicType : {
					show : true,
					type : [ 'line' ]
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				},
			}
		},
		xAxis : {
			type : 'category',
			data : xdata,
			name : '数据源',
			axisTick : {
				alignWithLabel : true
			},
			axisLabel : {
				interval : 0,
				rotate : 0,
				textStyle : {
					fontSize: 16
				},
				formatter : function(value) {
					if(value){
						return value.split("").join("\n");
					}else{
						return "未知服务";
					}
				}
			}
		},
		yAxis : {
			name : '可用率(%)',
			axisTick : {
				alignWithLabel : true
			}
		},
		series : [ {
			name : '可用率',
			type : 'bar',
			barWidth : '40%',
			data : ydata
		},
		],
		label : {
			normal : {
				show : true,
				position : 'top',
				formatter : '{c}'
			}
		},
		itemStyle : {
			normal : {
				shadowColor : 'rgba(0, 0, 0, 0.1)',
				shadowBlur : 10,
				color:'#8FBC8F'
			}
		},
	};
	detailEchart.setOption(option);
}

function resizeHtml() {
	onBtnClick();
}

